<template>
  <div class="video_page">
    <div class="top">
      <el-card>
        <el-form :inline="true" :model="queryParams" class="demo-form-inline">
          <el-form-item label="设备编号：">
            <el-select v-model="queryParams.deviceNum" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="设备类型：">
            <el-select v-model="queryParams.type" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option> </el-select
          ></el-form-item>
          <el-form-item label="设备状态：">
            <el-select v-model="queryParams.status" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item style="float: right">
            <el-button
              @click="onSubmit"
              size="small"
              style="border: 1px solid #3370ff; color: #3370ff"
              >查询</el-button
            >
            <el-button @click="onSubmit" size="small">清空</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
    <div class="bottom">
      <el-row :gutter="20">
        <el-col :span="4">
          <div class="elel_ard"></div>
          <el-card style="height: 100% !important">
            <el-tree
              style="width: 100% !important"
              show-checkbox
              :data="data"
              :props="defaultProps"
              @check="handleCheckChange"
            ></el-tree> </el-card
        ></el-col>
        <el-col :span="20">
          <el-card>
            <div class="right_top">
              <p>列表</p>
              <div class="r_t_right">
                <el-button
                  type="primary"
                  icon="el-icon-plus"
                  size="small"
                  v-hasPermi="['safetySupervision:device:add']"
                  >新建</el-button
                >
                <el-button
                  type="success"
                  icon="el-icon-download"
                  size="small"
                  v-hasPermi="['safetySupervision:device:export']"
                  >导出</el-button
                >
                <el-button icon="el-icon-refresh-right" size="small"
                  >刷新</el-button
                >
              </div>
            </div>
            <el-table :data="tableData" style="width: 100%">
              <el-table-column type="index" label="序号" width="50" />
              <el-table-column prop="date" label="所属景区" align="center">
              </el-table-column>

              <el-table-column prop="date" label="设备编号" align="center">
              </el-table-column>

              <el-table-column prop="date" label="设备地址" align="center">
              </el-table-column>

              <el-table-column prop="date" label="链接地址" align="center">
              </el-table-column>

              <el-table-column prop="date" label="设备类型" align="center">
              </el-table-column>

              <el-table-column prop="date" label="设备状态" align="center">
              </el-table-column>

              <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <el-link
                    type="primary"
                    :underline="false"
                    v-hasPermi="['safetySupervision:device:edit']"
                    >编辑</el-link
                  >
                  <el-link
                    type="primary"
                    :underline="false"
                    v-hasPermi="['safetySupervision:device:secure']"
                    >解除绑定</el-link
                  >
                  <el-link
                    type="primary"
                    :underline="false"
                    v-hasPermi="['safetySupervision:device:real']"
                    >实时监控</el-link
                  >
                </template>
              </el-table-column>
            </el-table>
            <!-- @pagination="getList" -->
            <pagination
              v-show="total > 0"
              :total="total"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
            />
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      total: 100,
      queryParams: {
        deviceNum: "",
        type: "",
        status: "",
        pageNum: 1,
        pageSize: 10,
      },
      radio: 4,
      defaultProps: {
        children: "children",
        label: "label",
      },
      data: [
        {
          label: "一级 1",
          children: [
            {
              label: "二级 1-1",
              children: [
                {
                  label: "三级 1-1-1",
                },
              ],
            },
          ],
        },
        {
          label: "一级 2",
          children: [
            {
              label: "二级 2-1",
              children: [
                {
                  label: "三级 2-1-1",
                },
              ],
            },
            {
              label: "二级 2-2",
              children: [
                {
                  label: "三级 2-2-1",
                },
              ],
            },
          ],
        },
        {
          label: "一级 3",
          children: [
            {
              label: "二级 3-1",
              children: [
                {
                  label: "三级 3-1-1",
                },
              ],
            },
            {
              label: "二级 3-2",
              children: [
                {
                  label: "三级 3-2-1",
                },
              ],
            },
          ],
        },
      ],
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },
  methods: {
    changeRadio(e) {
      console.log(e);
      console.log(this.radio);
    },
    handleCheckChange(data, checked) {
      let choose = checked.checkedNodes;
      let arr = [];
      for (let i = 0; i < choose.length; i++) {
        if (choose[i].children && choose[i].children.length) {
        } else {
          arr.push(choose[i]);
        }
      }
      console.log(arr);
    },
  },
};
</script>

<style lang="scss" scoped>
.el-link {
  margin: 0 6px;
}
::v-deep .el-tree-node__expand-icon {
  position: absolute;
  right: 0;
}
::v-deep .el-tree {
  min-height: 59vh;
}

.video_page {
  padding: 20px;
  .top {
    margin-bottom: 20px;
  }
  .bottom {
    height: 100%;
  }
}

.class4 {
  width: 48%;
  height: 48%;
}
.class6 {
  width: 30%;
  height: 33%;
}
.item_div {
  margin: 0 10px 10px 0;
  img {
    width: 100%;
    height: 100%;
  }
}
.right_top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
</style>
